<template>
  <view class="logout-page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @click="navigateBack">
        <image class="back-icon" src="/static/Images/wallet/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="title">账号注销</view>
    </view>

    <!-- 主要内容 -->
    <view class="content">
      <!-- 正文内容 -->
      <view class="content-text">
        <text>{{ mainContent }}</text>
      </view>

      <!-- 大标题攻略 -->
      <view class="section">
        <view class="section-title">大标题攻略</view>
        <view class="section-content">
          <text>{{ strategyContent }}</text>
        </view>
      </view>

      <!-- 注意事项 -->
      <view class="section">
        <view class="section-title">注意</view>
        <view class="section-content">
          <text>{{ noticeContent }}</text>
        </view>
      </view>
    </view>

    <!-- 底部确认区域 -->
    <view class="footer">
      <view class="agreement">
        <checkbox :checked="isAgreed" @click="toggleAgreement" color="#FF3037" class="checkbox" />
        <text class="agreement-text">我已阅读并同意</text>
        <text class="agreement-link">账号注销重要提醒</text>
      </view>
      <button class="confirm-btn" :disabled="!isAgreed" @click="handleConfirm">确定</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 是否同意协议
const isAgreed = ref(false);

// 页面内容
const mainContent = ref('正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容');
const strategyContent = ref('正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容');
const noticeContent = ref('正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容');

// 切换协议同意状态
const toggleAgreement = () => {
  isAgreed.value = !isAgreed.value;
};

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 确认注销
const handleConfirm = () => {
  if (!isAgreed.value) return;
  
  // 模拟注销操作
  uni.showLoading({
    title: '处理中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    // 注销成功后跳转到成功页面
    uni.navigateTo({
      url: '/pages/common/success?type=logout'
    });
  }, 1500);
};
</script>

<style lang="scss">
.logout-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.header {
  position: relative;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

/* 主要内容 */
.content {
  flex: 1;
  padding: 30rpx;
  background-color: #f5f5f5;
}

.content-text {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.section {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.section-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 底部确认区域 */
.footer {
  padding: 30rpx;
  background-color: #fff;
}

.agreement {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.checkbox {
  transform: scale(0.8);
  margin-right: 10rpx;
}

.agreement-text {
  font-size: 28rpx;
  color: #666;
}

.agreement-link {
  font-size: 28rpx;
  color: #FF6B00;
}

.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #FF3037;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 45rpx;
  border: none;
}

.confirm-btn[disabled] {
  background-color: #ccc;
  color: #fff;
}
</style>